<template>
  <div>
    <a-form :model="form" layout="vertical">
      <a-form-item label="检查时间">
        <a-select
          style="width: 200px"
          :options="dateOptions"
          :model-value="dateModelValue"
          @change="getData"
        ></a-select>
      </a-form-item>
      <template v-if="noData">
        <a-image src="./../../../../src/assets/images/no-data.png"></a-image>
      </template>
      <template v-else>
        <a-form-item label="合并症">
          <dict-tag
            :options="complicationType"
            :value="form.complicationType"
          />
          <a-tag v-if="form.boneMineralOther">
            骨矿物质代谢异常-{{ form.boneMineralOther }}</a-tag
          >
          <a-tag v-if="form.nervousOther">
            神经系统-{{ form.nervousOther }}</a-tag
          >
        </a-form-item>
        <a-form-item label="传染病筛查">
          <dict-tag :options="contagionType" :value="form.contagionType" />
        </a-form-item>
        <a-form-item label="术前检查图片：">
          <a-image-preview-group infinite>
            <a-space>
              <a-image
                v-for="(item, index) in form.pictureAddress"
                :key="index"
                :src="item"
                width="250"
                height="140"
              />
            </a-space>
          </a-image-preview-group>
        </a-form-item>
        <a-form-item label="术前检查表格：">
          <excel-table
            v-for="(item, index) in form.formAddress"
            :key="index"
            :src="item"
          ></excel-table>
        </a-form-item>
        <a-form-item label="备注：">
          {{ form.remark }}
        </a-form-item>
      </template>
    </a-form>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { getOperSearchAfter, getAfterDate } from '@/api/operSearch';
  import { Message } from '@arco-design/web-vue';
  import { getDicts } from '@/api/system/dict-data';
  import { parseTime } from '@/utils/index';

  export default defineComponent({
    props: {
      id: {
        type: [String, Number, Array],
        default: 0,
      },
    },
    setup: (props) => {
      const form: any = ref({});
      const noData: any = ref(false);
      const contagionType: any = ref([]);
      const complicationType: any = ref();
      const getKeysData = async (keys: any) => {
        const httpList: any = [];
        keys.forEach((element: any) => {
          httpList.push(
            new Promise((resolve, reject) => {
              const [key, name] = element.split('-');
              getDicts(key)
                .then(
                  (res) => {
                    resolve(
                      res?.data.map(
                        (item: { dictValue: any; dictLabel: any }) => ({
                          ...item,
                          dictLabel: `${name}-${item.dictLabel}`,
                          dictValue: `${name}-${item.dictValue}`,
                        })
                      ) || []
                    );
                  },
                  (err) => {
                    reject(err);
                  }
                )
                .catch((err) => {
                  reject(err);
                });
            })
          );
        });
        const res = await Promise.all(httpList);
        return res
          .map((item) => item)
          .flat()
          .map((item: any) => ({
            ...item,
            label: item.dictLabel,
            value: item.dictValue,
          }));
      };

      const dateOptions: any = ref([]);
      const dateModelValue: any = ref();
      const getData = async (createTime: any) => {
        dateModelValue.value = createTime;
        contagionType.value = await getKeysData([
          'hepatitis_b-乙肝',
          'hcv-丙肝',
        ]);
        complicationType.value = await getKeysData([
          'cardiovascular-心血管',
          'nervous_system-神经系统',
          'bone_mineral-骨矿物质代谢异常',
        ]);
        const { code, msg, rows } = await getOperSearchAfter({
          userId: props.id,
          createTime,
        });
        if (code !== 200) {
          Message.error(msg);
        }
        if (rows.length <= 0) {
          Message.warning('没有查询到该用户的数据');
          noData.value = true;
          return;
        }
        noData.value = false;
        const [x] = rows;
        if (x.pictureAddress) {
          x.pictureAddress = x.pictureAddress.split(',').map((item: any) => {
            return `${import.meta.env.VITE_API_BASE_URL}${item}`;
          });
        }
        if (x.formAddress) {
          x.formAddress = x.formAddress.split(',').map((item: any) => {
            return `${import.meta.env.VITE_API_BASE_URL}${item}`;
          });
        }
        x.complicationType = [];
        if (x.cardiovascularValue) {
          x.cardiovascularValue = x.cardiovascularValue
            .split(',')
            .map((item: any) => `心血管-${item}`);
          x.complicationType.push(...x.cardiovascularValue);
        }
        if (x.nervousSystemValue) {
          x.nervousSystemValue = x.nervousSystemValue
            .split(',')
            .map((item: any) => `神经系统-${item}`)
            .filter((item: string) => item !== '-1');
          x.complicationType.push(...x.nervousSystemValue);
        }
        if (x.boneMineralValue) {
          x.boneMineralValue = x.boneMineralValue
            .split(',')
            .map((item: any) => `骨矿物质代谢异常-${item}`)
            .filter((item: string) => item !== '-1');
          x.complicationType.push(...x.boneMineralValue);
        }
        x.contagionType = [];
        if (x.hepatitisBValue) {
          x.hepatitisBValue = x.hepatitisBValue
            .split(',')
            .map((item: any) => `乙肝-${item}`);
          x.contagionType.push(...x.hepatitisBValue);
        }
        if (x.hcvValue) {
          x.hcvValue = x.hcvValue.split(',').map((item: any) => `丙肝-${item}`);
          x.contagionType.push(...x.hcvValue);
        }
        form.value = {
          ...x,
        };
      };
      getAfterDate({
        userId: props.id,
      }).then(({ code, msg, data }) => {
        if (code !== 200) {
          Message.error(msg);
        }
        if (data.length <= 0) {
          Message.warning('没有查询到该用户的数据');
          noData.value = true;
          return;
        }
        noData.value = false;
        dateOptions.value = data
          .map((item: { createTime: any }) =>
            parseTime(item.createTime, '{y}-{m}-{d}')
          )
          .sort(
            (a: any, b: any) => new Date(b).getTime() - new Date(a).getTime()
          )
          .map((item: any) => ({
            label: item,
            value: item,
          }));
        getData(dateOptions.value[0].value);
      });
      return {
        form,
        contagionType,
        complicationType,
        dateOptions,
        dateModelValue,
        getData,
        noData,
      };
    },
  });
</script>

<style lang="less" scoped>
  span {
    margin-right: 4px;
    margin-bottom: 4px;
  }
</style>
